<template>
  <!--字段生成的meta-->
  <el-row :gutter="20">
    <el-col :span="6">
      <el-input
        v-model="json"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 20 }"
        placeholder=""
      ></el-input>
    </el-col>
    <el-col :span="12">
      <div
        style="height: 40px;"
        v-for="(item, index) in colMeta"
        :key="index"
      >
        {{item.formItemMeta.label}}：
        <component
          style="width: 300px;"
          :is="formItemKey[item.formItemMeta.controlType]"
          :model="model"
          v-bind="item"
        >
        </component>
      </div>
    </el-col>
    <el-col :span="6">
      <div
        v-for="(item, key, index) in model"
        :key="index"
      >
        {{key}}：{{item}}
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
  import { defineComponent, reactive, computed } from 'vue'
  import { formItemKey } from '@naturefw/ui-elp'
  import { toMetaForm } from '../../../../lib-excel/main'

  /**
   * 字段 meta
   */
  export default defineComponent({
    name: 'nf-xls-meta-col',
    props: {
    },
    setup(props, context) {

      const model = reactive({})

      // 获取表单和字段的meta
      const {
        formMeta,
        colMeta
      } = toMetaForm(model)

      const json = computed(() => JSON.stringify(colMeta, null, 2))

      
      return {
        formItemKey,
        model,
        formMeta,
        colMeta,
        json
      }
    }
  })
</script>